<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/css/public.css" media="all">

    <style>
        .table-row-bar{
            padding: 0px 5px;
            cursor: pointer;
        }

        .date-icon{
            position: absolute;
            top: 7px;
            right: 10px;
            font-size: 20px;
        }

        .layui-form-item .layui-inline{
            margin-right: 0px;
        }

    </style>
</head>
<body>
<div id="container" class="layuimini-container">
    <div class="layuimini-main">

        <div style="margin: 10px 0px 10px 0px">
            <form class="layui-form" action="" id="myform" lay-filter="myform">
                <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label" style="padding: 9px 15px 9px 0px;width: 50px;">状态：</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <select v-model="status" name="status" lay-filter="status">
                                <option value=""></option>
                                <option value="1">待支付</option>
                                <option value="cancel">已取消</option>
                                <option value="2">已支付</option>
                                <option value="0">已完成</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label" style="padding: 9px 15px 9px 0px;width: 50px;">订单号：</label>
                        <div class="layui-input-inline" style="width: 180px;">
                            <input type="text" name="orderId" v-model="orderId" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="float: right;margin-right:0px;">
                        <a class="layui-btn layui-btn-normal" lay-submit="" style="width: 100px;" lay-filter="data-search-btn" @click="search">查询</a>
                        <a class="layui-btn layui-btn-normal" lay-submit="" style="width: 100px;" lay-filter="data-reset-btn" @click="reset">重置</a>
                    </div>
                </div>
            </form>
        </div>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    </div>
</div>

<!-- Vue 表达式与Layui模板表达式冲突，需放在Vue Scope 外边 -->
<!--<script type="text/html" id="addressTpl">-->
<!--    <a class="table-row-bar" lay-event="detail" style="color: #1890FF;">{{d.addressFrom}}</a>-->
<!--</script>-->

<script type="text/html" id="statusTpl">
    {{# if(d.status == '0'){ }}
        <span class="layui-badge layui-bg-orange">已完成</span>
    {{# } else if(d.status == '1') { }}
        <span class="layui-badge layui-bg-green">待支付</span>
    {{# } else if(d.status == '2') { }}
        <span class="layui-badge layui-bg-green">已支付</span>
    {{#  } else if(d.status > 2){ }}
        <span class="layui-badge layui-bg-red">已取消</span>
    {{#  }  }}
</script>
<script type="text/html" id="type">
    {{# if(d.type == '0'){ }}
        <span class="layui-badge layui-bg-orange">收购</span>
    {{# } else if(d.type == '1') { }}
        <span class="layui-badge layui-bg-green">出售</span>
    {{#  }  }}
</script>
<script type="text/html" id="payType">
    {{# if(d.payType == '0'){ }}
        <span class="layui-badge layui-bg-orange">微信</span>
    {{# } else if(d.payType == '1') { }}
        <span class="layui-badge layui-bg-green">支付宝</span>
    {{# } else if(d.payType == '2') { }}
        <span class="layui-badge layui-bg-green">银行卡</span>
    {{#  }  }}
</script>
<script type="text/html" id="user">
{{d.nickName}}#{{d.phone}}
</script>




<!-- Vue 表达式与Layui模板表达式冲突，需放在Vue Scope 外边 -->
<script type="text/html" id="operTpl">
    <a class="table-row-bar" lay-event="detail" style="color: #1890FF;">{{d.reqOrderId}}</a>
</script>



<script type="text/html" id="operate">
    {{# if(d.status == '1'){ }}
    <a class="layui-btn layui-btn-normal" lay-submit="" style="width: 100px;" lay-filter="data-search-btn" onclick="revert('{{d.orderId}}')">取消订单</a>
    {{# } else if(d.status == '2') { }}
    <a class="layui-btn layui-btn-normal" lay-submit="" style="width: 100px;" lay-filter="data-search-btn" onclick="revert('{{d.orderId}}')">撤消订单</a>
    {{#  }  }}
</script>
<script type="text/html" id="firstTime">
    {{#if(d.firstTime) { layui.util.toDateString(d.firstTime, 'yyyy-MM-dd HH:mm:ss')} }}
</script>
<script type="text/html" id="secondTime">
    {{#if(d.secondTime)  {layui.util.toDateString(d.secondTime, 'yyyy-MM-dd HH:mm:ss')} }}
</script>
<script type="text/html" id="createTime">
    {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss')}}
</script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/jquery-3.4.1.min.js"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/plugin/layuimini/lib/layui/layui.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/module/index/config.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/static/js/vue-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-i18n.js" charset="utf-8"></script>
<script src="/wpui-admin/wp-ewallet-admin/global/wp-project.js" charset="utf-8"></script>

<script>
    var vm;
    layui.use(['form', 'table','laydate'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            laydate = layui.laydate;

        vm = new Vue({
            el: '#container',
            i18n: wp.i18n(),
            data: {
                name:'张三',
                status:'',
                beginDate:'',
                endDate:'',
                address:''
            },
            mounted:function(){
                this.init();
                this.getCollectLog();
            },
            methods: {
                init:function(){
                    laydate.render({
                        elem: '#beginDate',
                        type: 'datetime'
                    });

                    laydate.render({
                        elem: '#endDate',
                        type: 'datetime'
                    });

                    form.render();
                },
                getCollectLog:function(){
                    var that = this;
                    table.render({
                        elem: '#currentTableId',
                        url: wp.url('/wp/ewallet/order/sysQuery'),
                        headers:wp.getAjaxHeaders(),
                        parseData: wp.parseGridData,
                        cellMinWidth:100,
                        cols: [[
                            {field: 'orderId', title: '订单编号',width:100,templet:'#addressTpl'},
                            {field: 'user',templet:'#user', title: '创建人',width:120},
                            {field: 'count', title: '数量',align:"right",width: 120},
                            {field:'type',title: '类型', templet: '#type',align: "center",width:120},
                            {field:'payType',title: '支付方式', templet: '#payType',align: "center",width:120},
                            {field:'status',title: '状态', templet: '#statusTpl',align: "center",width:120},
                            {field: 'createTime',templet:'#createTime', title: '创建时间'},
                            {field: 'firstTime',templet:'#firstTime', title: '支付时间'},
                            {field: 'secondTime',templet:'#secondTime', title: '完结时间'},
                            {field:'status',templet:'#operate',title:'操作'}
                        ]],
                        limits: wp.config.pageList,
                        limit: wp.config.pageSize,
                        page: true
                    });

                    table.on('tool(currentTableFilter)', function (obj) {
                        var data = obj.data;
                        if (obj.event === 'detail') {
                            that.detail(data);
                        }
                    });
                },
                search:function(){
                    // 查询参数
                    var queryParam = form.val("myform");
                    // console.log("queryParam = "+ JSON.stringify(queryParam))
                    // 执行搜索重载
                    table.reload('currentTableId',{
                        page: {curr: 1},
                        where:queryParam
                    });
                },
                reset:function(){
                    var that =this
                    $("#myform").get(0).reset();
                    that.getCollectLog()
                },
            }
        });
    });
</script>
<script>
    function revert(orderId) {
        layer.confirm("操作确认", { title: "确认" }, function (index) {
            $.post("/wp/ewallet/order/revert", { orderId:orderId }, function (data)
            {
                var num = data.code=="000000" ? 1 : 2;
                layer.msg(data.message,{icon:num,shade:0.3,offset: '40%',time:2000});

                if (num == 1)layer.close(index); //如果设定了yes回调，需进行手工关闭
                setTimeout(function(){
                    //刷新
                    vm.search();
                },1000);
            });
        });
    }
</script>

</body>
</html>